<template>

  <div class="homeDetail">

    <div class="tabr-nav-title">
       <van-nav-bar
        title="快处上报"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
     <!-- 步骤一 -->
    <div v-show="step == 1">

      <div class="formList">
         <van-form label-width="6.6em" ref="setp1FormRef"
          > <van-cell-group inset
            > <van-field
              v-model="fromDataSetp1.ifPint"
              is-link
              readonly
              name="ifPint"
              label="点位是否在库"
              placeholder="点击选择点位是否在库"
              required
              :rules="[formRules.required]"
              @click="showPicker.ifPint = true"
            /> <van-popup
              v-model:show="showPicker.ifPint"
              destroy-on-close
              position="bottom"
              > <van-picker
                :model-value="[fromDataSetp1.ifPint]"
                :columns="columns"
                @confirm="(value) => pickerConfirm(value, 'ifPint')"
                @cancel="showPicker.ifPint = false"
              /> </van-popup
            > <template v-if="fromDataSetp1.ifPint == '是'"
              > <van-field
                v-model="fromDataSetp1.riskPoint"
                is-link
                readonly
                name="riskPoint"
                label="点位名称"
                placeholder="点击选择点位名称"
                required
                :rules="[formRules.required]"
                @click="showPicker.riskPoint = true"
              /> <van-popup
                v-model:show="showPicker.riskPoint"
                destroy-on-close
                position="bottom"
                > <van-picker
                  :columns="pointPickerColumns"
                  :model-value="[fromDataSetp1.riskPoint]"
                  @confirm="(value) => pickerConfirm(value, 'riskPoint')"
                  @cancel="showPicker.riskPoint = false"
                /> </van-popup
              > </template
            > <template v-else
              > <van-field
                v-model="fromDataSetp1.riskPoint"
                name="riskPoint"
                label="点位名称"
                placeholder="请输入点位名称"
                required
                :rules="[formRules.required]"
              ></van-field
              >
              <div class="map-button">
                 <van-button
                  :type="
                    fromDataSetp1.coordx == '' || fromDataSetp1.coordy == ''
                      ? 'warning'
                      : 'success'
                  "
                  size="small"
                  @click="mapClickOpen"
                  style="width: 100%"
                  > {{
                    fromDataSetp1.coordx == '' || fromDataSetp1.coordy == ''
                      ? '点击选择地图定位'
                      : '重新选择地图定位'
                  }} </van-button
                >
              </div>
               </template
            > <van-field
              v-model="fromDataSetp1.riskPointAddress"
              name="riskPointAddress"
              label="详细地址"
              placeholder="请输入详细地址"
              required
              :rules="[formRules.required]"
            /> <van-field
              v-model="fromDataSetp1.accumulatedWaterDepth"
              type="number"
              name="accumulatedWaterDepth"
              label="积水深度"
              placeholder="请输入"
              required
              :rules="[formRules.required]"
              > <template #button> <span>cm</span> </template> </van-field
            > <van-field
              v-model="fromDataSetp1.other"
              name="other"
              label="其他"
              placeholder="请输入其他"
            />
            <div class="uploadButton">
               <van-uploader
                v-model="fileList.url"
                :before-read="(file) => beforeRead(file, 'url')"
                :after-read="(file) => afterRead(file, 'url')"
                :max-count="5"
                > <van-button type="primary" size="small"
                  >上传点位照片</van-button
                > </van-uploader
              >
            </div>
             </van-cell-group
          > </van-form
        >
      </div>

      <div class="detailFoot">
         <van-button
          style="flex: 1"
          type="primary"
          size="small"
          @click="submitClick"
          >下一步</van-button
        >
      </div>

    </div>
     <!-- 步骤二 -->
    <div v-show="step == 2">

      <div class="formList">
         <van-form label-width="6.6em" ref="setp2FormRef" style="height: 1000px"
          > <van-cell-group inset
            > <van-field
              v-model="fromDataSetp2.teamName"
              is-link
              readonly
              name="teamName"
              label="处置班组"
              placeholder="点击选择处置班组"
              required
              :rules="[formRules.required]"
              @click="showPicker.teamName = true"
            /> <van-popup
              v-model:show="showPicker.teamName"
              destroy-on-close
              position="bottom"
              > <van-picker
                :model-value="[fromDataSetp2.teamName]"
                :columns="bzListColumns"
                @confirm="(value) => pickerConfirm2(value, 'teamName')"
                @cancel="showPicker.teamName = false"
              /> </van-popup
            > <van-field
              v-model="fromDataSetp2.disposeStartTime"
              is-link
              readonly
              name="disposeStartTime"
              label="处置开始时间"
              placeholder="请选择"
              required
              :rules="[formRules.required]"
              @click="showPicker.disposeStartTime = true"
            /> <van-popup
              v-model:show="showPicker.disposeStartTime"
              destroy-on-close
              position="bottom"
              > <van-picker-group
                title="处置开始时间"
                :tabs="['选择日期', '选择时间']"
                @confirm="pickerTimeConfirm('disposeStartTime')"
                @cancel="showPicker.disposeStartTime = false"
                > <van-date-picker
                  v-model="pickerTimer.disposeStartTime.date"
                  :max-date="maxDate"
                /> <van-time-picker
                  v-model="pickerTimer.disposeStartTime.time"
                /> </van-picker-group
              > </van-popup
            > <van-field
              v-model="fromDataSetp2.disposeEndTime"
              is-link
              readonly
              name="disposeEndTime"
              label="处置结束时间"
              placeholder="请选择"
              required
              :rules="[formRules.required]"
              @click="showPicker.disposeEndTime = true"
            /> <van-popup
              v-model:show="showPicker.disposeEndTime"
              destroy-on-close
              position="bottom"
              > <van-picker-group
                title="处置结束时间"
                :tabs="['选择日期', '选择时间']"
                @confirm="pickerTimeConfirm('disposeEndTime')"
                @cancel="showPicker.disposeEndTime = false"
                > <van-date-picker
                  v-model="pickerTimer.disposeEndTime.date"
                  :max-date="maxDate"
                /> <van-time-picker v-model="pickerTimer.disposeEndTime.time" />
                </van-picker-group
              > </van-popup
            > <van-field
              v-model="fromDataSetp2.accumulatedWaterStartTime"
              is-link
              readonly
              name="accumulatedWaterStartTime"
              label="积水开始时间"
              placeholder="请选择"
              required
              :rules="[formRules.required]"
              @click="showPicker.accumulatedWaterStartTime = true"
            /> <van-popup
              v-model:show="showPicker.accumulatedWaterStartTime"
              destroy-on-close
              position="bottom"
              > <van-picker-group
                title="积水开始时间"
                :tabs="['选择日期', '选择时间']"
                @confirm="pickerTimeConfirm('accumulatedWaterStartTime')"
                @cancel="showPicker.accumulatedWaterStartTime = false"
                > <van-date-picker
                  v-model="pickerTimer.accumulatedWaterStartTime.date"
                  :max-date="maxDate"
                /> <van-time-picker
                  v-model="pickerTimer.accumulatedWaterStartTime.time"
                /> </van-picker-group
              > </van-popup
            > <van-field
              v-model="fromDataSetp2.accumulatedWaterEndTime"
              is-link
              readonly
              name="accumulatedWaterEndTime"
              label="积水结束时间"
              placeholder="请选择"
              required
              :rules="[formRules.required]"
              @click="showPicker.accumulatedWaterEndTime = true"
            /> <van-popup
              v-model:show="showPicker.accumulatedWaterEndTime"
              destroy-on-close
              position="bottom"
              > <van-picker-group
                title="积水结束时间"
                :tabs="['选择日期', '选择时间']"
                @confirm="pickerTimeConfirm('accumulatedWaterEndTime')"
                @cancel="showPicker.accumulatedWaterEndTime = false"
                > <van-date-picker
                  v-model="pickerTimer.accumulatedWaterEndTime.date"
                  :max-date="maxDate"
                /> <van-time-picker
                  v-model="pickerTimer.accumulatedWaterEndTime.time"
                /> </van-picker-group
              > </van-popup
            > <van-field
              v-model="fromDataSetp2.cessationRainTime"
              is-link
              readonly
              name="cessationRainTime"
              label="停雨时间"
              placeholder="请选择"
              required
              :rules="[formRules.required]"
              @click="showPicker.cessationRainTime = true"
            /> <van-popup
              v-model:show="showPicker.cessationRainTime"
              destroy-on-close
              position="bottom"
              > <van-picker-group
                title="停雨时间"
                :tabs="['选择日期', '选择时间']"
                @confirm="pickerTimeConfirm('cessationRainTime')"
                @cancel="showPicker.cessationRainTime = false"
                > <van-date-picker
                  v-model="pickerTimer.cessationRainTime.date"
                  :max-date="maxDate"
                /> <van-time-picker
                  v-model="pickerTimer.cessationRainTime.time"
                /> </van-picker-group
              > </van-popup
            > <van-field
              v-model="fromDataSetp2.accumulatedWaterArea"
              type="number"
              name="accumulatedWaterArea"
              label="积水面积"
              placeholder="请输入"
              required
              :rules="[formRules.required]"
              > <template #button> <span>m²</span> </template> </van-field
            > <van-field
              v-model="fromDataSetp2.accumulatedWaterTime"
              type="number"
              name="accumulatedWaterTime"
              label="积水时长"
              placeholder="请输入"
              required
              :rules="[formRules.required]"
              > <template #button> <span>h</span> </template> </van-field
            > <van-field
              v-model="fromDataSetp2.retreatWaterTime"
              type="number"
              name="retreatWaterTime"
              label="退水时长"
              placeholder="请输入"
              required
              :rules="[formRules.required]"
              > <template #button> <span>h</span> </template> </van-field
            > <van-field
              v-model="fromDataSetp2.ifDisconnection"
              is-link
              readonly
              name="ifDisconnection"
              label="是否断交"
              placeholder="点击选择是否断交"
              required
              :rules="[formRules.required]"
              @click="showPicker.ifDisconnection = true"
            /> <van-popup
              v-model:show="showPicker.ifDisconnection"
              destroy-on-close
              position="bottom"
              > <van-picker
                :model-value="[fromDataSetp2.ifDisconnection]"
                :columns="columns"
                @confirm="(value) => pickerConfirm2(value, 'ifDisconnection')"
                @cancel="showPicker.ifDisconnection = false"
              /> </van-popup
            > <van-field
              v-if="fromDataSetp2.ifDisconnection == '是'"
              v-model="fromDataSetp2.disconnectionContent"
              name="disconnectionContent"
              label="断交时长"
              placeholder="请输入"
              required
              :rules="[formRules.required]"
              > <template #button> <span>h</span> </template> </van-field
            > <van-field
              v-model="fromDataSetp2.ifTrouble"
              is-link
              readonly
              name="ifTrouble"
              label="是否受困"
              placeholder="点击选择是否受困"
              required
              :rules="[formRules.required]"
              @click="showPicker.ifTrouble = true"
            /> <van-popup
              v-model:show="showPicker.ifTrouble"
              destroy-on-close
              position="bottom"
              > <van-picker
                :model-value="[fromDataSetp2.ifTrouble]"
                :columns="columns"
                @confirm="(value) => pickerConfirm2(value, 'ifTrouble')"
                @cancel="showPicker.ifTrouble = false"
              /> </van-popup
            > <van-field
              v-if="fromDataSetp2.ifTrouble == '是'"
              v-model="fromDataSetp2.predicamentReasons"
              name="predicamentReasons"
              label="受困情况"
              placeholder="请输入"
              required
              :rules="[formRules.required]"
            /> <van-field
              v-model="fromDataSetp2.bz"
              name="bz"
              label="备注"
              placeholder="请输入"
            />
            <div class="newList">

              <div
                class="list"
                v-for="(item, index) in disposalMatterList"
                :key="index"
              >

                <div class="top"> {{ item.label }} </div>

                <div class="bottom">
                   <van-switch
                    active-color="#00b01b"
                    style="width: 100%"
                    v-model="item.value"
                    :active-value="'1'"
                    :inactive-value="'0'"
                  />
                  <div class="tips">
                     <span
                      :style="{
                        color: item.value === '1' ? '#fff' : '#000',
                      }"
                      >{{ item.value === '1' ? '已完成' : '未完成' }}</span
                    > <span
                      class="tip"
                      :style="{
                        color: item.value === '1' ? '#D5D5D5' : '#AAAAAA',
                      }"
                      >{{ '点击确认完成情况' }}</span
                    >
                  </div>

                </div>

              </div>

            </div>

            <div class="uploadButton">
               <van-uploader
                v-model="fileList.arrivalSystemFileId"
                :before-read="(file) => beforeRead(file, 'arrivalSystemFileId')"
                :after-read="(file) => afterRead(file, 'arrivalSystemFileId')"
                > <van-button type="primary" size="small"
                  >上传拍摄到场照片</van-button
                > </van-uploader
              >
            </div>

            <div class="uploadButton">
               <van-uploader
                v-model="fileList.disposeSystemFileId"
                :before-read="(file) => beforeRead(file, 'disposeSystemFileId')"
                :after-read="(file) => afterRead(file, 'disposeSystemFileId')"
                > <van-button type="primary" size="small"
                  >上传拍摄处置后照片</van-button
                > </van-uploader
              >
            </div>
             </van-cell-group
          > </van-form
        >
      </div>

      <div class="detailFoot">
         <van-button
          style="flex: 1; margin-right: 10px"
          type="primary"
          size="small"
          @click="step = 1"
          >上一步</van-button
        > <van-button
          style="flex: 1"
          type="success"
          size="small"
          @click="submitClick"
          >确认上报</van-button
        >
      </div>

    </div>
     <!-- 地图点选 --> <GaoMap
      ref="mapRef"
      :center="mapSetting.center"
      v-on:mapClick="mapClick"
    ></GaoMap
    >
  </div>

</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { showFailToast, showSuccessToast, showToast } from 'vant'
  import GaoMap from '../../components/GaoMap.vue'
  import {
    upload,
    getPointPlus,
    dangerClasses,
    speedinessReport,
    getBzOptions,
  } from '../../api/index.js'
  import formRules from '../../utils/formRules.ts'
  import { getCurrentDateTimeArray } from '../../utils/common.ts'
  import { getUserInfo } from '../../utils/userInfo.js'
  const onClickLeft = () => history.back()
  const router = useRouter()
  const route = useRoute()

  const userInfo = getUserInfo()
  const step = ref(1 as number)
  const dateTimeArray = getCurrentDateTimeArray()
  const maxDate = new Date(dateTimeArray[0].join('-'))
  const minDate = new Date(2020, 1, 1)

  // 地图组件
  const mapRef = ref()
  const mapSetting = reactive({
    center: [] as number[],
  })

  const columns = [
    { text: '是', value: '是', labelValue: '1' },
    { text: '否', value: '否', labelValue: '0' },
  ]
  const pointPickerColumns = ref([])
  const bzListColumns = ref([])

  const setp1FormRef = ref()
  const setp2FormRef = ref()
  const showPicker = reactive<Record<string, boolean>>({
    ifPint: false,
    riskPoint: false,

    teamName: false,
    disposeStartTime: false,
    disposeEndTime: false,
    accumulatedWaterStartTime: false,
    accumulatedWaterEndTime: false,
    cessationRainTime: false,
    disconnectionContent: false,
    ifTrouble: false,
  })

  const fromDataSetp1 = reactive({
    ifPint: '否',
    riskPoint: '',
    riskPointId: '',
    coordx: '',
    coordy: '',
    riskPointAddress: '',
    // districtName: userInfo.orgName || '',
    other: '',
    accumulatedWaterDepth: '',
    level: '',
    url: [],
  })
  const fromDataSetp2 = reactive({
    teamId: '',
    teamName: '',
    teamGroupId: '',
    teamGroupName: '',
    teamGroupPhone: '',

    disposeStartTime: '',
    disposeEndTime: '',
    accumulatedWaterStartTime: '',
    accumulatedWaterEndTime: '',
    cessationRainTime: '',
    accumulatedWaterArea: '',
    accumulatedWaterTime: '',
    retreatWaterTime: '',
    ifDisconnection: '',
    disconnectionContent: '',
    ifTrouble: '',
    predicamentReasons: '',
    bz: '',
    disposalMatter: '',
    arrivalSystemFileId: [],
    disposeSystemFileId: [],
  })
  const pickerTimer = reactive({
    disposeStartTime: { date: dateTimeArray[0], time: dateTimeArray[1] },
    disposeEndTime: { date: dateTimeArray[0], time: dateTimeArray[1] },
    accumulatedWaterStartTime: {
      date: dateTimeArray[0],
      time: dateTimeArray[1],
    },
    accumulatedWaterEndTime: { date: dateTimeArray[0], time: dateTimeArray[1] },
    cessationRainTime: { date: dateTimeArray[0], time: dateTimeArray[1] },
  })
  const disposalMatterList = ref(
    [] as {
      label: string
      value: string
    }[],
  )
  const fileList = ref({
    // 点位照片
    url: [],
    // 到场照片
    arrivalSystemFileId: [],
    // 处置后照片
    disposeSystemFileId: [],
  })

  // fromDataSetp1 picker 确认
  const pickerConfirm = ({ selectedValues }, fieldName: string) => {
    showPicker[fieldName] = false
    fromDataSetp1[fieldName] = selectedValues[0]
  }
  // fromDataSetp2 picker 确认
  const pickerConfirm2 = ({ selectedValues }, fieldName: string) => {
    showPicker[fieldName] = false
    fromDataSetp2[fieldName] = selectedValues[0]
  }
  // picker 时间选择
  const pickerTimeConfirm = (type: string) => {
    fromDataSetp2[type] =
      pickerTimer[type].date.join('-') +
      ' ' +
      pickerTimer[type].time.join(':') +
      ':00'
    showPicker[type] = false
  }
  // 返回布尔值
  const beforeRead = (file: File | File[], type: string): boolean => {
    const files = Array.isArray(file) ? file : [file]
    const validTypes = ['image/jpeg', 'image/png']
    for (const f of files) {
      if (!validTypes.includes(f.type)) {
        showToast('请上传 jpg/png 格式图片')
        return false
      }
    }
    // if (file?.type !== "image/jpeg" && file?.type !== "image/png") {
    //   showToast("请上传 jpg/png 格式图片");
    //   return false;
    // }
    // if (fileList.value[type].length >= 1) {
    //   fileList.value[type].shift();
    // }
    return true
  }
  // 上传
  const afterRead = (file: any, type: string) => {
    const formData = new FormData()
    formData.append('file', file.file)
    file.status = 'uploading'
    file.message = '上传中...'
    upload(formData).then((res: any) => {
      if (res.data.code === 200 && res.data.data) {
        // if (type === 'url') {
        //   fromDataSetp1[type].push(res.data.data.id);
        // } else {
        //   fromDataSetp2[type] = res.data.data.id;
        // }
        file.id = res.data.data.id
        file.status = 'done'
      }
    })
  }

  const submitClick = async () => {
    if (step.value === 1) {
      try {
        // 手动触发表单验证
        await setp1FormRef.value.validate()
        if (fromDataSetp1.level === '')
          return showToast('积水深度未达到告警最低等级(15cm)，无需上报')
        if (fromDataSetp1.coordx === '' || fromDataSetp1.coordy === '')
          return showToast('请选择地图定位')
        if (fileList.value.url.length === 0) return showToast('请上传点位照片')

        step.value = 2 // 进入下一步

        const { data } = await dangerClasses(fromDataSetp1.level)
        if (data.code === 200) {
          // 处置情况回显
          const tempArr = Object.entries(data.data).map(([label, value]) => ({
            label,
            value: String(value),
          }))
          disposalMatterList.value = tempArr
        }
      } catch (error) {}
    } else if (step.value === 2) {
      // 处理第二步提交逻辑
      try {
        // 手动触发表单验证
        await setp2FormRef.value.validate()
        const arr = disposalMatterList.value.find((item) => item.value === '1')
        if (!arr) return showToast('处置情况至少需要完成一项')
        if (fileList.value.arrivalSystemFileId.length === 0)
          return showToast('请上传拍摄到场照片')
        if (fileList.value.disposeSystemFileId.length === 0)
          return showToast('请上传拍摄处置后照片')

        const disposalMatter = disposalMatterList.value.reduce((acc, item) => {
          acc[item.label] = item.value
          return acc
        }, {})
        const url = fileList.value.url.map((item) => item.id)
        const arrivalSystemFileId = fileList.value.arrivalSystemFileId.map(
          (item) => item.id,
        )
        const disposeSystemFileId = fileList.value.disposeSystemFileId.map(
          (item) => item.id,
        )
        const ifDisconnection = fromDataSetp2.ifDisconnection === '是' ? 1 : 0
        const ifTrouble = fromDataSetp2.ifTrouble === '是' ? 1 : 0

        const obj = {
          ...fromDataSetp1,
          ...fromDataSetp2,
          disposalMatter,
          ifDisconnection,
          disconnectionContent:
            ifDisconnection === 1 ? fromDataSetp2.disconnectionContent : '',
          ifTrouble,
          predicamentReasons:
            ifTrouble === 1 ? fromDataSetp2.predicamentReasons : '',
          url: url.join(','),
          arrivalSystemFileId: arrivalSystemFileId.join(','),
          disposeSystemFileId: disposeSystemFileId.join(','),
        }
        speedinessReport(obj)
          .then((res) => {
            if (res) {
              showSuccessToast('提交成功')
              history.back()
            } else {
              showToast('提交失败')
            }
          })
          .catch((err) => {
            console.log(err)
            showToast(err.message)
          })
      } catch (error) {
        console.log(error)
      }
    }
  }

  // 地图点击回调
  const mapClick = (e: number[]) => {
    if (!e[0] || !e[1]) return
    fromDataSetp1.coordx = String(e[0])
    fromDataSetp1.coordy = String(e[1])
  }

  const mapClickOpen = () => {
    if (fromDataSetp1.coordx !== '' && fromDataSetp1.coordy !== '') {
      mapSetting.center = [
        Number(fromDataSetp1.coordx),
        Number(fromDataSetp1.coordy),
      ]
    }
    mapRef.value.open()
  }

  onMounted(async () => {
    const { data } = await getBzOptions({
      code: userInfo.countyCode,
    })
    bzListColumns.value =
      data?.data?.map((item) => {
        return {
          ...item,
          text: item.name + `(${item.userName})`,
          value: item.name,
        }
      }) ?? []
  })

  // 班组
  watch(
    () => fromDataSetp2.teamName,
    (newValue) => {
      const currentBz = bzListColumns.value.find(
        (item) => item.name === newValue,
      )
      fromDataSetp2.teamId = currentBz?.id || ''
      fromDataSetp2.teamGroupId = currentBz?.userId || ''
      fromDataSetp2.teamGroupName = currentBz?.userName || ''
      fromDataSetp2.teamGroupPhone = currentBz?.phone || ''
    },
  )

  // 在库-点位选择
  watch(
    () => fromDataSetp1.riskPoint,
    (newValue) => {
      if (newValue === '否') return

      const point = pointPickerColumns.value.find(
        (item) => item.value === newValue,
      )
      fromDataSetp1.riskPointId = point?.riskPointId || ''
      fromDataSetp1.riskPointAddress = point?.address || ''
      fromDataSetp1.coordx = point?.coordx || ''
      fromDataSetp1.coordy = point?.coordy || ''
    },
  )

  // 是否在库
  watch(
    () => fromDataSetp1.ifPint,
    (newValue) => {
      fromDataSetp1.riskPointId = ''
      fromDataSetp1.riskPoint = ''
      fromDataSetp1.riskPointAddress = ''
      fromDataSetp1.coordx = ''
      fromDataSetp1.coordy = ''
      if (newValue === '否') return

      // 获取点位
      getPointPlus(userInfo.countyCode).then((res) => {
        const { data } = res.data
        pointPickerColumns.value = data?.map((item) => {
          return {
            text: item.name,
            value: item.name,
            riskPointId: item.id,
            address: item.address,
            coordx: item.longitude, // 经度
            coordy: item.latitude, // 纬度
          }
        })
      })
    },
  )

  // 积水深度
  watch(
    () => fromDataSetp1.accumulatedWaterDepth,
    (newValue) => {
      if (Number(newValue) > 50) {
        fromDataSetp1.level = '1'
      } else if (Number(newValue) <= 50 && Number(newValue) > 25) {
        fromDataSetp1.level = '2'
      } else if (Number(newValue) >= 15 && Number(newValue) <= 25) {
        fromDataSetp1.level = '3'
      } else {
        fromDataSetp1.level = ''
      }
    },
  )
</script>

<style scoped lang="less">
  .map-button {
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
}
.homeDetail {
  height: 100vh;
  background: #f7f8f7;
}

.homeHeader {
  padding: 10px;
  background: #fff;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}

.tabr-nav-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 44px;
  font-size: 18px;
  color: #29292c;
  text-align: center;
  font-style: normal;
  background: #fff;
  width: 100vw;
}
.formList {
  height: calc(100vh - 135px);
  margin: 10px 0;
  overflow-y: auto;
  background: #fff;
  .uploadButton {
    padding: 10px;
    box-sizing: border-box;
    :deep(.van-uploader) {
      width: 100%;
      .van-uploader__input-wrapper {
        width: 100%;
        .van-button {
          width: 100%;
        }
      }
    }
  }
  .newList {
    background: #fff;
    border-radius: 10px;
    padding-bottom: 1px;
    margin-bottom: 10px;
    padding: 10px;

    .list {
      width: 100%;
      background-color: rgba(242, 242, 242, 1);
      margin-bottom: 5px;
      padding: 8px 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &:last-child {
        margin-bottom: 0;
      }
      .top {
        color: #333;
        width: calc(100% - 50px);
      }
      .bottom {
        margin-top: 5px;
        --van-switch-width: calc(100vw - 72px);
        position: relative;
        .tips {
          position: absolute;
          bottom: 10px;
          left: 40px;
          .tip {
            margin-left: 50px;
            font-size: 10px;
          }
        }
      }
    }
  }
}
.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
</style>

